const { createApp, ref, computed } = Vue;

const app = createApp({
    setup() {

        /// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 全局变量 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
        const username = ref('');
        const password = ref('');
        const confirmPassword = ref('');
        const usernameError = ref('');
        const passwordError = ref('');
        const confirmPasswordError = ref('');
        const usernameValid = ref(false);
        const passwordValid = ref(false);
        const confirmPasswordValid = ref(false);
        const BASE_URL = baseUrl; // 引入 baseUrl

        /// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 全局变量 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

        // 用户名正则：中文、英文、数字、_，3-16个字符，数字与_不能开头
        const usernameRegex = /^[a-zA-Z\u4e00-\u9fa5][a-zA-Z0-9_\u4e00-\u9fa5]{2,15}$/;
        // 密码正则：大写、小写、数字、_、.6-16个字符
        const passwordRegex = /^[a-zA-Z0-9_\.]{6,16}$/;

        const validateUsername = () => {
            if (!username.value) {
                usernameError.value = '用户名不能为空';
                usernameValid.value = false;
            } else if (!usernameRegex.test(username.value)) {
                usernameError.value = '用户名必须是3-16个字符，可包含中文、英文、数字和下划线，但不能以数字或下划线开头';
                usernameValid.value = false;
            } else {
                usernameError.value = '';
                usernameValid.value = true;
            }
        };

        const validatePassword = () => {
            if (!password.value) {
                passwordError.value = '密码不能为空';
                passwordValid.value = false;
            } else if (!passwordRegex.test(password.value)) {
                passwordError.value = '密码必须是6-16个字符，可包含大小写字母、数字、下划线和点号';
                passwordValid.value = false;
            } else {
                passwordError.value = '';
                passwordValid.value = true;
            }

            // 如果确认密码已经输入，则重新验证确认密码
            if (confirmPassword.value) {
                validateConfirmPassword();
            }
        };

        const validateConfirmPassword = () => {
            if (!confirmPassword.value) {
                confirmPasswordError.value = '确认密码不能为空';
                confirmPasswordValid.value = false;
            } else if (confirmPassword.value !== password.value) {
                confirmPasswordError.value = '两次输入的密码不一致';
                confirmPasswordValid.value = false;
            } else {
                confirmPasswordError.value = '';
                confirmPasswordValid.value = true;
            }
        };

        const isFormValid = computed(() => {
            return usernameValid.value && passwordValid.value && confirmPasswordValid.value;
        });

        const handleRegister = async () => {
            if (!isFormValid.value) return;

            try {
                const formData = new URLSearchParams();
                formData.append('username', username.value);
                formData.append('password', password.value);

                const response = await axios.post(BASE_URL + '/user/register', formData, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                });

                if (response.data.code === 200) {
                    alert('注册成功！');
                    // 注册成功后跳转到登录页
                    window.location.href = 'login.html';
                } else {
                    alert(response.data.message || '注册失败，请重试');
                }
            } catch (error) {
                alert('注册失败：' + (error.response?.data?.message || error.message));
            }
        };

        return {
            username,
            password,
            confirmPassword,
            usernameError,
            passwordError,
            confirmPasswordError,
            usernameValid,
            passwordValid,
            confirmPasswordValid,
            isFormValid,
            validateUsername,
            validatePassword,
            validateConfirmPassword,
            handleRegister
        };
    }
});

app.mount('#app'); 